<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		* {
		  margin: 0;
		  padding: 0;
		  list-style: none;
		  -webkit-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none; }

		.menu {
		  display: inline-block;
		  width: 500px;
		  border-radius: 8px;
		  padding: 20px;
		  box-shadow: 5px 5px 10px #888;
		  margin: 20px;
		  cursor: default; }
		  .menu h1 {
			margin-bottom: 10px;
			display: inline-block;
			margin-right: 20px; }
			.menu h1.active {
			  color: red; }
		  .menu ul {
			position: relative; }
		  .menu ul > li {
			height: 35px;
			line-height: 35px;
			cursor: grab; }
			.menu ul > li input {
			  display: none; }
			.menu ul > li button {
			  float: right; }
			.menu ul > li:hover {
			  background: #f2f2f2; }
            /* v-cloak 不显示未加载的模板字符串*/
            [v-cloak] {
                display: none;
            }
            .modal{
                width: 80%;
                max-width: 80%;
                height: 45%;
                position: absolute;
                top: 50%;
                left: 50%;
                background-color: beige;
                border-radius: 5%;
                font-size: 30px;
                color: brown;
                transform: translate(-50%,-50%);
                z-index: 10;
            }
            .modal input{
                padding: 1% 0;
                width: 80%;
            }
            .modal >div{
                margin: 8% 0;
                padding: 0 5%;
            }
            .modal .button{
                position: absolute;
                right: 0;
                bottom: -5%;
            }
            .button >button{
                padding: 10px 15px;
                border-radius: 5px;
                border: 1px solid transparent;
                cursor: pointer;
            }
            .button >button:first-of-type{
                color: #f2f2f2;
                background-color: blue;
            }
            .button >button:last-of-type{
                color: aliceblue;
                background-color: red;
            }
		</style>
	</head>
	<body>
        <div class="menu" id="app" v-cloak>
            <div class="modal" v-show="isModal">
                <div>
                    <label for="food_name">菜名:</label>
                    <input type="text" name="food_name" id="food_name" v-model="modify_food.name">
                </div>
                <div>
                    <label for="food_price">价格:</label>
                    <input type="text" name="food_price" id="food_price" v-model="modify_food.price">
                </div>
                <div class="button">
                    <button @click="sureModify()">确认</button>
                    <button @click="noModify">取消</button>
                </div>
            </div>

            <div class="menu1">
                <h1 class="classfy" 
                    v-for="(item,index) in menu"
                    @click="changeMenu(index)"
                    v-bind:class="{active: menu_index==index}"
                    >
                    {{item.name}}
                </h1>
            </div>


            <div class="menu2">
                <div class="m2_t">
                    <input type="text" placeholder="菜名" v-model="add_food.name"/> 
                    <input type="number" placeholder="价格" v-model="add_food.price"/>
                    <button class="add" @click="add()">添加</button>
                </div> 

                <ul>
                    <li v-for="(food,index) in menu[menu_index].food">
                        <span>{{food.name}}</span>
                        <input type="text" />
                        <span>价格: ￥{{food.price}}</span>
                        <input type="number"/>
                        <button class="del" @click="delMenuFood(index)">删除</button>
                        <button class="change" @click="modify(index)">修改</button>
                    </li>
                </ul>
            </div>
        </div>
		
		
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			/* 
				step 1: 根据menu的数据，动态生成一个二级联运菜单
				step 2: 实现动态增加、修改、删除菜单dom节点，同时保持dom结构与json保持同步
				step 3: 实现通过拖拽修改菜单结构（可使用jQuery插件），同时保持dom结构与json保持同步
				
				初始数据:
			 */
			var _menu = [
				{"type_id":1,"name":"大菜","food":[
					{"food_id":1,"name":"鱼香肉丝","price":"10"},
					{"food_id":2,"name":"红烧肉","price":"11"},
					{"food_id":3,"name":"香辣粉","price":"12"}
				]},
				{"type_id":2,"name":"中菜","food":[
					{"food_id":4,"name":"小炒肉","price":"13"},
					{"food_id":5,"name":"云吞","price":"14"}
				]},
				{"type_id":3,"name":"小菜","food":[
					{"food_id":6,"name":"雪糕","price":"15"},
					{"food_id":7,"name":"黄瓜","price":"16"}
				]}      
			];
			
			new Vue({
                el: '#app',
                data: {
                    menu: _menu,
                    menu_index: 0,
                    add_food: {
                        name: "",
                        price: ""
                    },
                    isModal: false,
                    modify_food: {
                        name: "",
                        price: "",
                        modify_index: 0
                    }
                },
                methods: {
                    changeMenu(index){
                        //切换菜单下标
                        this.menu_index = index;

                    },
                    delMenuFood(index){
                        // console.log(index);
                        this.menu[this.menu_index].food.splice(index,1);
                    },
                    add(){
                        if( this.add_food.name !="" &&  this.add_food.price != ""){
                            this.menu[this.menu_index].food.push({"food_id": 4,"name": this.add_food.name,"price": this.add_food.price});
                            //清空
                            this.add_food.name = "";
                            this.add_food.price = "";
                        }
                    },
                    modify(index){
                        this.isModal = true;
                        this.modify_food.modify_index = index;
                        console.log(this.modify_food.modify_index);
                    },
                    sureModify(){
                        old_foodId = this.menu[this.menu_index].food[this.modify_food.modify_index].food_id;
                        this.menu[this.menu_index].food.splice(this.modify_food.modify_index, 1, {food_id:old_foodId,name:this.modify_food.name, price:this.modify_food.price});
                        this.modify_food.name = "";
                        this.modify_food.price = "";
                        this.modify_food.modify_index = 0;
                        this.isModal = false;
                    },
                    noModify(){
                        this.modify_food.name = "";
                        this.modify_food.price = "";
                        this.modify_food.modify_index = 0;
                        this.isModal = false;
                    }
                }
            });
		</script>
	</body>
</html>
